<script setup>
import {
  getFirstClassify,
  getMajorApi,
  getTabApi,
  getBannerApi,
  getMarketingCourseApi,
  getRecommendCourse,
  getTabClassifyCourse,
  getSearchClassifyCourse,
} from "../../http/http";
import { reactive, ref, toRefs, onMounted } from "vue";
import MyHeader from "../../components/MyHeader.vue";
import { useRouter } from "vue-router";
import MyRecommendCourse from "../../components/MyRecommendCourse.vue";
const { push } = useRouter();
// 定义数据类型
const data = reactive({
  TabActive: 1,
  Classify: [],
  newClassify: [],
  show: true,
  shows: false,
  showss: false,
  Myid: "1",
  major_id: "1",
  activeName: 1,
  getMajors: [],
  // 点击添加
  major_name: [],
  butShow: false,
  myheaderInfo: [
    {
      title: "管理类联考",
    },
  ],
  gg: false,
  // tab数据
  tabList: [],
  // 轮播图数据
  BannerList: [],
  // 免费直播课数据
  MarketingCourse: [],
  // 免费直播名字
  modelName: {},
  // 推荐好课
  RecommendCourse: [],
  status: false || JSON.parse(localStorage.getItem("status")),
});
// 考试分类数据
getFirstClassify().then((res) => {
  data.Classify = res.data;
});
// tab数据
getTabApi(data.Myid).then((res) => {
  data.tabList = res.data;
});

// 切换tab更新数据
// 精选
function FngetTabClassifyCourse() {
  let obj = {
    page: 1,
    limit: 10,
    classify_id: data.TabActive,
    title: "",
  };
  getTabClassifyCourse(obj).then((res) => {
    data.RecommendCourse = res.data;
  });
}
// Banner图数据
function FnBanner() {
  getBannerApi(data.TabActive).then((res) => {
    data.BannerList = res.data;
  });
}
FnBanner();

// 近期公开课
function FnGetMarketingCourseApi() {
  getMarketingCourseApi(data.Myid).then((res) => {
    console.log(res);

    data.MarketingCourse = res.data.course_list;
    data.modelName = res.data;
  });
}
FnGetMarketingCourseApi();
// 推荐好课
// function FngetRecommendCourse() {
//   getRecommendCourse(data.Myid).then((res) => {
//     // console.log(res.data.course_list);
//     data.RecommendCourse = res.data.course_list;
//   });
// }

// 点击跳转详情
const getMajor = (id) => {
  data.Myid = id;
  console.log(id);
  data.show = false;
  data.shows = true;
  data.newClassify = data.Classify.filter((ele) => ele.id == id);
};
// 点击返回
const back = () => {
  data.show = true;
  data.shows = false;
};
// 点击选着在校生
const overTitle = (id) => {
  data.show = false;
  data.shows = false;
  data.showss = true;

  getMajorApi(id).then((res) => {
    console.log(res);
    data.getMajors = res.data;
  });
};
// 点击添加颜色
const getMajors_a = (id, name) => {
  data.butShow = true;
  data.major_id = id;
  data.major_name = name;
};
// 点击按钮关闭
const butflg = () => {
  data.show = false;
  data.shows = false;
  data.showss = false;
  localStorage.setItem("show", "12");
  data.myheaderInfo = data.Classify.filter((ele) => ele.id == data.Myid);
  // 点击完成获取本地状态
  let gg = localStorage.getItem("show");
  if (gg == "12") {
    data.status = true;
    localStorage.setItem("status", JSON.stringify(data.status));
  } else {
    data.status = false;
    localStorage.setItem("status", JSON.stringify(data.status));
  }
};
if (localStorage.getItem("show")) {
  data.show = false;
  data.shows = false;
  data.showss = false;
}
// 点击第二个返回
const overleft = () => {
  data.shows = true;
  data.showss = false;
};
// 点击管理
const manage = () => {
  data.show = true;
};
// 切换tab
const onClickTab = (e) => {
  if (e.name != 1) {
    data.MarketingCourse = [];
  } else {
    // 免费直播课
    FnGetMarketingCourseApi();
  }
  // 近期公开课
  // FngetRecommendCourse();
  data.TabActive = e.name;
  // 轮播
  FnBanner();
  FngetTabClassifyCourse();
};
// 点击跳转到直播
const Tolive = () => {
  push({
    path: "/LiveClass",
    query: { classify_id: data.TabActive },
  });
};
// 跳转到直播详情
const ToDetalis = (id) => {
  push({
    path: "/LiveDetalis",
    query: { basis_id: id },
  });
};

// 点击跳转到详情
const BannerId = (id) => {
  push({
    path: "/LiveDetalis",
    query: { basis_id: id },
  });
};

const {
  show,
  Classify,
  shows,
  newClassify,
  Myid,
  showss,
  getMajors,
  major_id,
  major_name,
  butShow,
  myheaderInfo,
  tabList,
  BannerList,
  MarketingCourse,
  modelName,
  activeName,
  TabActive,
  RecommendCourse,
  status,
} = toRefs(data);
</script>

<template>
  <div class="home">
    <!-- 首页 -->
    <div class="div" v-if="status == true">
      <!-- 头部 -->
      <MyHeader>
        <template #left>
          <span
            @click="manage"
            v-for="(item, index) in myheaderInfo"
            :key="index"
          >
            {{ item.title }} <van-icon name="arrow"
          /></span>
        </template>
        <template #text>
          <van-icon size="28" name="search" @click="$router.push('/search')" />
        </template>
        <template #right> <div class="toptight"></div> </template>
      </MyHeader>
      <!-- 头部tab切换 -->
      <van-tabs v-model:active="activeName" @click-tab="onClickTab">
        <van-tab title="精选" :name="1 * 1">
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in BannerList" :key="index">
              <img :src="item.banner_img" alt="" @click="BannerId(item.link)" />
            </van-swipe-item>
          </van-swipe>
        </van-tab>
        <van-tab
          v-for="(item, index) in tabList"
          :key="index"
          :title="item.title"
          :name="item.id"
        >
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in BannerList" :key="index">
              <img :src="item.banner_img" alt="" @click="BannerId(item.link)" />
            </van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
      <!-- 中间天数 -->
      <div class="coursetime">
        <div class="coursetime_img">
          <img
            src=""
            alt=""
          />
        </div>
        <div class="time">距离考研119天</div>
      </div>
      <!-- 免费直播 -->
      <div class="befre" v-show="MarketingCourse.length > 0">
        <h2>{{ modelName.model_name }}</h2>
        <span style="color: rgb(102, 102, 102)" @click="Tolive"
          >查看全部 <van-icon name="arrow"
        /></span>
      </div>
      <div class="MarketingCourse">
        <div
          class="home_MarketingCourse"
          v-for="(item, index) in MarketingCourse"
          :key="index"
          @click="ToDetalis(item.id)"
        >
          <div class="MarketingCourse_avatar">
            <img
              src="https://lexuemiao.oss-cn-beijing.aliyuncs.com/uploads/image/20224wnkersk1659940001.png"
              alt=""
            />
          </div>
          <div class="MarketingCourse_title">
            {{ item.title }}
          </div>
          <div class="MarketingCourse_price">免费</div>
          <div class="MarketingCourse_num">{{ item.sales_num }}人已报名</div>
        </div>
      </div>
      <!-- 精选 -->
      <div
        class="carefullyChosen_title"
        v-show="RecommendCourse.length > 0 && MarketingCourse.length > 0"
      >
        <h3>精选</h3>
      </div>
      <div class="carefullyChosen_box">
        <MyRecommendCourse
          :RecommendCourseList="RecommendCourse"
        ></MyRecommendCourse>
      </div>
    </div>
    <!-- ------------------------------------- -->
    <!-- 选择弹出层 -->
    <van-popup v-model:show="show" :style="{ height: '65%' }" position="bottom">
      <div class="home_const">
        <div class="home_header">选择考试</div>
        <div
          :class="Myid == item.id ? 'addColor' : 'Classify_list'"
          v-for="(item, index) in Classify"
          :key="index"
          @click="getMajor(item.id)"
        >
          {{ item.title }}
          <p>{{ item.brief }}</p>
        </div>
      </div>
    </van-popup>
    <!-- 详情弹出层 -->
    <van-popup v-model:show="shows" position="bottom">
      <div
        class="newClassify_title"
        v-for="(item, index) in newClassify"
        :key="index"
      >
        <div class="newheader">
          <van-icon name="arrow-left" @click="back" />
          <div class="name">{{ item.title }}</div>
        </div>
        <div class="newClassify">
          <div class="Classify_list" @click="overTitle(item.id)">在校生</div>
          <div class="Classify_list" @click="overTitle(item.id)">在职业</div>
        </div>
      </div>
    </van-popup>
    <!-- 点击选着最后类型 -->
    <van-popup v-model:show="showss" position="bottom">
      <div class="home_const">
        <div class="home_footer">
          <van-icon name="arrow-left" @click="overleft" />
          <div
            class="home_header"
            v-for="(item, index) in newClassify"
            :key="index"
          >
            {{ item.title }}
            <!-- data.major_name -->
          </div>
          <div class="but">
            <van-button
              v-show="butShow"
              round
              color="#f15a24"
              size="small"
              type="success"
              @click="butflg"
              >完成</van-button
            >
          </div>
        </div>

        <div
          :class="major_id == item.major_id ? 'addColor' : 'Classify_list'"
          v-for="(item, index) in getMajors"
          :key="index"
          @click="getMajors_a(item.major_id, item)"
        >
          {{ item.major_name }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
/* 精选 */
.carefullyChosen_title {
  margin: 60px 0;
  margin-left: 20px;
  font-size: 35px;
  font-weight: 700;
}

/* 公开课 */
.MarketingCourse {
  width: 750px;
  margin-top: 70px;
  display: flex;
  justify-content: space-evenly;
}
.home_MarketingCourse {
  width: 30%;
  height: 274px;
  position: relative;
  background: #eaeaea;
  border-radius: 10px;
  padding: 0 30px;
  padding-top: 29px;
  font-size: 16px;
  text-align: center;
}
.home_MarketingCourse .MarketingCourse_avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #f15a24;
  top: -70px;
  left: 50%;
  margin-left: -0.53333rem;
  z-index: 2;
  background: #fff;
}
.MarketingCourse_avatar img {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  margin: auto;
}
.MarketingCourse_title {
  margin-top: -60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.MarketingCourse_price {
  width: 150px;
  height: 40px;
  background: #f15a24;
  color: white;
  border-radius: 50px;
  margin: 10px auto;
}
.MarketingCourse_num {
  color: #f15a24;
}
.coursetime {
  width: 750px;
  height: 21px;
  text-align: center;
  margin-top: 20px;
}
.coursetime img {
  width: 60px;
  height: 40px;
}
.time {
  font-size: 30px;
  font-weight: 400;
  color: #a0a7b8;
}
.befre {
  width: 750px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  margin-top: 100px;
  padding: 0 20px;
}
.befre h2 {
  font-size: 35px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  height: 280px;
  width: 695px;
  margin: auto;
  margin-top: 15px;
  border-radius: 20px;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}

.home {
  width: 750px;
  height: 200px;
}
.home_const {
  text-align: center;
}
.home_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home_header {
  margin: 30px 0;
  font-size: 40px;
}
.Classify_list {
  width: 90%;
  margin: auto;
  background: #f8f8f5;
  font-size: 16px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 50px;
  text-align: center;
}
.newClassify_title {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  margin: 40px;
  font-size: 40px;
}
.newheader {
  display: flex;
}
.name {
  flex: 1;
  text-align: center;
}
.addColor {
  color: white;
  background: #f15a24 !important;
  width: 90%;
  margin: auto;
  background: #f8f8f5;
  font-size: 16px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 50px;
  text-align: center;
}
.toptight {
  width: 50px;
  height: 50px;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
</style>
